<template>
  <view class="container">
    <pap-navbar title="我的" bgColor="transparent" />
    <view class="grow min-h-0 flex flex-col">
      <view class="TimUi-list">
        <view class="TimUi-list-item">
          <view class="TimUi-list-item-media">
            <u--image
              width="128rpx"
              height="128rpx"
              :showLoading="true"
              :src="userInfo.avatar"
              shape="circle"
            ></u--image>
          </view>
          <view class="TimUi-list-item-inner">
            <view class="flex align-center TimUi-list-item-title">
              <text>{{ userInfo.userName }}</text>
              <view class="tag">
                <image src="/static/images/icon_stack.png" />
                <text>{{ userInfo.departmentName }}</text>
              </view>
            </view>
            <view class="flex align-center TimUi-list-item-text">
              <image
                class="icon-phone"
                src="/static/images/icon_phone.png"
                mode="widthFix"
              />
              <text>{{ userInfo.phone }}</text>
            </view>
          </view>
          <view class="TimUi-list-item-extra flex align-center">
            <text>编辑资料</text>
            <u-icon name="arrow-right"></u-icon>
          </view>
        </view>
      </view>
      <button class="TimUi-btn block bgc-52D9" @click="logout">退出登录</button>
    </view>
    <pap-tabbar tabIndex="2" />
  </view>
</template>

<script>
export default {
  data() {
    return {
      userInfo: {
        avatar: '/static/images/default_avatar.png',
        userName: '系统用户',
        phone: '0731-8208208820',
        departmentName: '1标部门'
      }
    }
  },
  onLoad() {},
  methods: {
    logout() {
      // 清除所有本地缓存
      uni.clearStorageSync()
      //   uni.removeStorageSync('Token')
      //   uni.removeStorageSync('accountId')
      //   uni.removeStorageSync('userInfo')
      //   this.$store.commit('user/SET_PROXYURL', httpConfig.basePath)
      uni.showToast({
        title: '已注销',
        icon: 'none',
        duration: 2000
      })
      uni.reLaunch({
        url: '/pages/login/index'
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.container {
  &::after {
    content: '';
    z-index: -1;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 742rpx;
    background: linear-gradient(
      180deg,
      #366ef4 0%,
      rgba(54, 110, 244, 0) 54.08%
    );
  }

  .TimUi-list {
    margin: 32rpx;
    font-size: 28rpx;
    color: rgba(29, 33, 41, 0.9);

    .TimUi-list-item {
      .TimUi-list-item-media {
        margin: 0 24rpx 0;
      }

      .TimUi-list-item-title {
        margin: 0 0 16rpx;
        font-size: 36rpx;
        font-weight: 600;

        .tag {
          display: flex;
          align-items: center;
          margin: 0 0 0 16rpx;
          padding: 8rpx 14rpx;
          background: rgba(71, 125, 254, 1);
          border-radius: 6rpx;

          image {
            width: 20rpx;
            height: 20rpx;
            margin: 0 8rpx 0;
          }

          text {
            font-size: 20rpx;
            color: rgba(255, 255, 255, 1);
          }
        }
      }

      .TimUi-list-item-extra {
        font-size: 28rpx;
        font-weight: 400;
      }

      .icon-phone {
        width: 40rpx;
        height: 40rpx;
      }
    }
  }

  .TimUi-btn {
    position: absolute;
    bottom: 64rpx;
    left: 48rpx;
    right: 48rpx;
    width: initial;
  }
}
</style>
